<template>
	<view class="detail">
		<navBar :storeId="data.store_id" title="房产详情" :goodsid="data.id" type="1" :iscollection="data.is_collection" @oncollection="oncollection"></navBar>
		<view class="main_block">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in data.others_img" :key="index" @tap="goPictrue()">
					<view class="swiper-item banner"><image :src="item.thumb" mode="widthFix"></image></view>
				</swiper-item>
			</swiper>
			<view class="main">
				<view class="title">{{ data.name }}</view>
				<view class="second_title">{{ data.alias }}</view>
				<view class="tags">
					<text class="tag" v-for="(item, index) in data.tag_id" :key="index">{{ item }}</text>
				</view>
				<view class="info">
					<view class="row">
						<view class="text two">
							<text class="name">均价</text>
							<text class="content">{{ data.avg_price }}元/m²</text>
						</view>
						<view class="text two">
							<text class="name">总价</text>
							<text class="content">{{ data.total_amount }}元/m²</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">类型</text>
							<text class="content" v-if="data.type == 1">住宅</text>
							<text class="content" v-if="data.type == 2">别墅</text>
							<text class="content" v-if="data.type == 3">公寓</text>
							<text class="content" v-if="data.type == 4">商铺</text>
							<text class="content" v-if="data.type == 5">写字楼</text>
						</view>
						<view class="text two">
							<text class="name">开盘</text>
							<text class="content">{{ data.open_estate }}</text>
						</view>
					</view>
					<view class="row">
						<view class="text two">
							<text class="name">建面</text>
							<text class="content">{{ data.build_surface }}㎡</text>
						</view>
						<view class="text two">
							<text class="name">状态</text>
							<text class="content">{{ data.status == 1 ? '在售' : '下线' }}</text>
						</view>
					</view>
					<view class="row">
						<view class="text one">
							<text class="name">地址</text>
							<text class="content">{{ data.address }}</text>
						</view>
					</view>
					<view class="row">
						<view class="text one"><view class="more" @tap="info(data.id)">更多详细信息></view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="jindu" v-if="data.engineering_img && data.engineering_img[0]">
			<view class="title_all"><text>工程进度(在线监控)</text></view>
			<view class="first_image" @tap="goPictrue()" v-if="data.engineering_img && data.engineering_img[0]">
				<image :src="data.engineering_img[0]['thumb']" mode="widthFix"></image>
			</view>
			<view class="images">
				<view class="img" @tap="goPictrue()" v-for="(item, index) in data.engineering_img" :key="index" v-if="index != 0">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="huxing">
			<view class="title_all">
				<text>户型图({{ data.apartment_img ? data.apartment_img.length : 0 }})</text>
			</view>
			<block v-for="(item, index) in data.apartment_img" :key="index"><image @tap="goPictrue()" :src="item.thumb" mode="widthFix"></image></block>
		</view>
		<view class="images"><image v-for="(item, index) in data.others_img" :key="index" :src="item.thumb" mode="widthFix" style="width: 100%;"></image></view>
		<comment :goodsid="id" type="1"></comment>
		<view class="map" v-if="longitude != null && latitude != null">
			<view class="title_all"><text>楼盘周边</text></view>
			<view class="nav">
				<view class="title"><text>周边规划</text></view>
				<view class="right">
					<text :class="map_keyword == item ? 'active' : ''" v-for="(item, key) in map_arr" :key="key" @tap="getMap(item)">{{ item }}</text>
				</view>
			</view>
			<view class="map_box"><map class="map_panel" scale="15" :longitude="longitude" :latitude="latitude" :markers="markers_arr"></map></view>
			<view class="list">
				<view class="list_item title">两个公里内周边设施</view>
				<view class="list_item" v-for="(item, index) in markers_arr" :key="index">
					<image src="../../../static/position.png" mode="widthFix"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="more_tuijian">
			<view class="title_all"><text>更多推荐</text></view>
			<view class="list">
				<block v-for="(item, index) in data.recommend" :key="index"><house-pannel :goods="item" type="1"></house-pannel></block>
			</view>
		</view>
		<view class="footer">
			<view class="index" @tap="goIndex()">
				<image src="../../../static/home.png" mode="widthFix"></image>
				<text>首页</text>
			</view>
			<view class="chat">
				<image src="../../../static/chat.png" mode="widthFix"></image>
				<text>在线客服</text>
			</view>
			<view class="right">
				<view class="block" @tap="addCart()"><text class="car">加入购物车</text></view>
				<view class="block" @tap="chooseHouse()"><text class="yuding">在线预定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/nav-bar-detail/nav-bar-detail.vue';
import housePannel from '@/components/house-pannel/house-pannel.vue';
import comment from '@/components/comment/index.vue';
export default {
	components: {
		navBar,
		housePannel,
		comment
	},
	data() {
		return {
			markers_arr: [],
			longitude: null,
			latitude: null,
			map_keyword: '商业',
			id: null,
			data: {},
			map_arr: ['商业', '教育', '公园', '医院', '地铁', '车站']
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.getData();
	},
	methods: {
		oncollection(e) {
			let data = this.data;
			data.is_collection = e.is_collection;
		},
		getData() {
			this.$request
				.post('/landed/getInfo', {
					data: {
						type: 1,
						id: this.id
					}
				})
				.then(res => {
					this.data = res.data.data.list;
					if (this.data.latlng) {
						let latlngObj = this.data.latlng.split(',');
						this.longitude = latlngObj[0];
						this.latitude = latlngObj[1];
					}
					this.getMap();
				});
		},
		info(id) {
			uni.navigateTo({
				url: '/pages/house_property/propertiesinfo/propertiesinfo?id=' + id
			});
		},
		goPictrue() {
			uni.navigateTo({
				url: `/pages/house_property/pictrue/pictrue?type=1&id=${this.id}`
			});
		},
		goIndex() {
			uni.switchTab({
				url: '/pages/tabbar/tabbar-1/tabbar-1'
			});
		},
		chooseHouse() {
			uni.navigateTo({
				url: `/pages/house_property/chooseHouse/chooseHouse?id=${this.id}`
			});
		},
		addCart() {
			let authData = uni.getStorageSync('authData');
			if (authData.auth) {
				this.$request
					.post('/landed/addMyCar', {
						data: {
							type: 1,
							goods_id: this.id
						},
						header: {
							Authorization: authData.auth
						}
					})
					.then(res => {
						if (res.data.code == 10000) {
							uni.showToast({
								title: '添加成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '添加失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
			}
		},
		getMap(keyword = '商业') {
			this.map_keyword = keyword;
			this.$request
				.post('/landed/getAround', {
					data: {
						latlng: this.data.latlng,
						keyword
					}
				})
				.then(res => {
					this.markers_arr = [];
					let markers = res.data.data.list;
					let newMarkers = [];
					for (let $key in markers) {
						newMarkers.push({
							title: markers[$key]['name'],
							latitude: markers[$key]['latitude'],
							longitude: markers[$key]['longitude'],
							iconPath: '/static/position.png'
						});
					}
					this.markers_arr = newMarkers;
				});
		}
	}
};
</script>

<style lang="scss">
.detail {
	padding-bottom: 150upx;
	background-color: #f3f3f3;
	.main_block {
		box-sizing: border-box;
		padding: 30upx;
		background-color: #ffffff;
		border-bottom-left-radius: 40upx;
		border-bottom-right-radius: 40upx;
	}
	.banner {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.main {
		width: 100%;
		padding-top: 10upx;

		.title {
			width: 100%;
			line-height: 50upx;
			font-size: $uni-font-size-base;
			color: #333;

			box-sizing: border-box;
		}

		.second_title {
			width: 100%;
			line-height: 50upx;
			font-size: $uni-font-size-base;
			color: #666666;

			box-sizing: border-box;
		}

		.tags {
			width: 100%;
			box-sizing: border-box;
			padding: 10upx 0upx;

			.tag {
				display: inline-block;
				background-color: #efefef;
				border: 1upx solid #999999;
				padding: 0 20upx;
				line-height: 50upx;
				font-size: $uni-font-size-base;
				color: #bbbbbb;
				margin-right: 20upx;
			}
		}

		.info {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			margin-bottom: 10upx;
			background-color: #fff;

			.row {
				width: 100%;
				height: 60upx;
				line-height: 60upx;
				font-size: $uni-font-size-base;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.text {
					width: 50%;
					height: 100%;

					&.one {
						width: 100%;
					}

					&.two {
						width: 50%;
					}

					.name {
						display: inline-block;
						margin-right: 20upx;
						min-width: 100upx;
					}

					.more {
						margin: 0 auto;
						text-align: center;
						width: 100%;
						height: 80upx;
						padding-top: 20upx;
						color: #ee0f24;
						border-top: 2upx solid #f3f3f3;
					}
				}
			}
		}
	}

	.jindu {
		width: 100%;

		.title {
			width: 100%;
			line-height: 100upx;
			font-size: $uni-font-size-lg;
			color: #333;
			padding: 0 20upx;
			box-sizing: border-box;
		}

		.first_image {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.images {
			align-items: flex-start;
			justify-content: space-between;
			display: flex;
			height: 180upx;
			padding-bottom: 20upx;
			overflow: hidden;
			.img {
				width: 240upx;
				overflow: hidden;
				height: 180upx;
				image {
					width: 100%;
				}
			}
		}
	}

	.huxing {
		width: 100%;

		.title {
			width: 100%;
			line-height: 100upx;
			font-size: $uni-font-size-lg;
			color: #333;
			padding: 0 20upx;
			box-sizing: border-box;
		}

		image {
			width: 100%;
		}
	}

	.footer {
		width: 100%;
		height: 130upx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: $uni-font-size-base;
		background-color: #fff;
		box-sizing: border-box;
		padding-left: 280upx;
		.index,
		.chat {
			width: 140upx;
			height: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #333333;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 40upx;
			}
		}
		.chat {
			left: 140upx;
		}

		.right {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.block {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					width: 90%;
					height: 70upx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					border-radius: 70upx;
					overflow: hidden;
					color: #ffffff;
					&.car {
						background-image: url(../../../static/btn_2.png);
					}
					&.yuding {
						background-image: url(../../../static/btn_1.png);
					}
				}
			}
		}
	}

	.map {
		width: 100%;

		.title {
			width: 100%;
			line-height: 100upx;
			font-size: $uni-font-size-lg;
			color: #333;
			padding: 0 20upx;
			box-sizing: border-box;
		}

		.nav {
			width: 100%;
			height: 80upx;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
			box-sizing: border-box;

			.title {
				width: 20%;
				padding: 0;
				line-height: 80upx;
				font-size: $uni-font-size-lg;
				color: #333;
				box-sizing: border-box;
				color: red;
			}

			.right {
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					margin-left: 30upx;
					color: $uni-text-color;
					font-size: $uni-font-size-base;

					&.active {
						color: red;
					}
				}
			}
		}

		.map_box {
			width: 100%;
			height: 400upx;
			overflow: hidden;

			.map_panel {
				width: 100%;
				height: 100%;
			}
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20upx;
			background-color: #ffffff;

			.list_item {
				width: 100%;
				line-height: 1.8em;
				font-size: $uni-font-size-base;
				color: #333;

				&.title {
					color: #bbbbbb;
					line-height: 1.8em;

					text {
						margin-left: 0;
					}
				}

				image {
					width: 30upx;
				}

				text {
					margin-left: 10upx;
				}
			}
		}
	}
}

.more_tuijian {
	.list {
		padding: 0 20upx;
	}
}

.title_all {
	box-sizing: border-box;
	padding: 20upx 20upx;
	text {
		padding-left: 24upx;
		font-size: $uni-font-size-lg;
		border-left: 6upx solid #f34b32;
		color: #333;
		font-weight: 700;
	}
}
</style>
